<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index" style="width: 150px"
				:class="{'active': viewType == item}"
				@click="changeView(item)"
			>
				<el-badge class="item">
					<span>{{item}}</span>
				</el-badge>
			</li>
		</div>
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<div class="input_flex daterange">
						<el-input clearable v-model="OnDutyProductPerson.dutyDay" disabled
								  placeholder="生产日期"></el-input>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="OnDutyProductPerson.whiteDay =='1'?'白班':'夜班'" disabled
								  placeholder="班次"></el-input>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="OnDutyProductPerson.banZhang" placeholder="班长" disabled></el-input>
					</div>
					<div class="input_flex" v-show="OnDutyProductPerson.hidden =='0'">
						<p class="zll-botton goback" @click="lockedProduct" style="width: 80px;padding: 5px 10px;">锁定</p>
					</div>
				</div>
			</div>
		</div>
		<div class="tableList">
			<table>
				<tr>
					<th width="9%">计划号</th>
					<th width="9%">计划类型</th>
					<th width="9%">品类</th>
					<th width="9%">计划名称</th>
					<th width="19%">规格</th>
					<th width="9%">单件(万支)</th>
					<th width="9%">生产件数</th>
					<th width="9%">生产万支</th>
					<th width="9%">操作工</th>
					<th width="9%">操作</th>
				</tr>
			</table>
			<div class="over_t" v-loading="tableLoading">

				<table v-for="(item, key) in OnDutyProductPerson.onDutyPersons" :key="key" style="margin-top: 20px">
					<tr v-for="(prod,index) in item" :key="index">
						<td width="9%"><p>{{ prod.planCode }}</p></td>
						<td width="9%"><p>{{ prod.planTypeCn }}</p></td>
						<td width="9%" :rowspan="item.length" v-if="index == 0"><p>{{prod.itemTypeId}}</p></td>
						<td width="9%"><p>{{ prod.planName }}</p></td>
						<td width="19%"><p>{{ prod.gradeValue }}</p></td>
						<td width="9%"><p>{{ prod.thNumber }}</p></td>
						<td width="9%"><p>{{ prod.taskCount }}</p></td>
						<td width="9%"><p>{{ prod.totalNum }}</p></td>
						<td width="9%" :rowspan="item.length" v-if="index == 0"><p>{{ prod.userName }}</p></td>
						<td width="9%">
							<p style="cursor: pointer" @click="seeProductPerson(prod)">查看</p>
						</td>
					</tr>
				</table>

			</div>
		</div>

		<div class="zll-dialog">
			<popout title="单班单品产量明细" :visible.sync="addDialog" v-if="addDialog" class="bigSize">
				<add ref="add" slot="content" :editData="editData"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add.vue'
	import {getStore} from "@/plugins/localStore";

	export default {
		data() {
			return {
				viewType: '',
				paramList: [],

				tableLoading: true, //table刷新

				productMaps: {},
				OnDutyProductPerson: {
					dutyDay: '',
					whiteDay: '',
					banZhang: '',
					hidden: '',
					onDutyPersons: {},
				},

				editData: {},
				addDialog: false

			};
		},
		methods: {

			lockedProduct() {
				let self = this;
				self.$confirm('是否确认锁定生产？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let user = getStore();
					self.$http({
						url: '/jinl/psRelate/updateLockOnDutyProduct',
						method: "post",
						params: {
							whiteDay: self.OnDutyProductPerson.whiteDay,
							dutyDay: self.OnDutyProductPerson.dutyDay,
							userName: user.userName,
							userId: user.id,
						}
					}).then(resp => {
						if (resp.success) {
							self.getOnDutyProductPersonList();
							self.$message.success('锁定成功！');
							return
						}
						self.$message.error(resp.message);
					});
				});
			},

			seeProductPerson(item) {
				let self = this;
				self.addDialog = true;
				console.log(item)
				self.$nextTick(() => {
					self.editData = Object.assign({}, item);
				});
			},

			changeView(val) {
				let self = this;
				self.viewType = val;
				self.tableLoading = true;
				setTimeout(() => {
					self.OnDutyProductPerson = self.productMaps[self.viewType];
					self.tableLoading = false;
				}, 500)
			},

			getOnDutyProductPersonList() {
				let self = this;
				self.productMaps = {};
				self.tableLoading = true;
				self.paramList = [];
				self.$http({
					url: "/jinl/dutyprod/getOnDutyProductPersonList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						let i = 0;
						for (let key in resp.result) {
							self.paramList[i] = key;
							++i;
						}
						console.log(self.paramList)
						self.viewType = self.paramList[0];
						self.productMaps = resp.result;
						if(self.productMaps[self.viewType] && self.productMaps[self.viewType].whiteDay){
							self.OnDutyProductPerson = self.productMaps[self.viewType];
							console.log('========self.productMaps=========')
							console.log(self.OnDutyProductPerson.onDutyPersons)
						}
						self.tableLoading = false;

					}
				});
			},

		},
		mounted() {
			let self = this;
			self.getOnDutyProductPersonList();
			self.$eventBus.$on('refreshOnDutyProductPersonList',function () {
				self.getOnDutyProductPersonList();
			})
		},
		components: {Add}
	};
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.mine-account {
		.search_list {
			display: flex;
			justify-content: space-between;

			.sb_ {
				margin-right: 20px;

				.input_flex {
					width: auto;
					display: flex;
					align-items: center;
				}
			}
		}

		.leftList {
			display: flex;
			margin-bottom: 15px;

			li {
				list-style: none;
				width: 100px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}

				.nums {
					position: absolute;
					right: 5px;
					top: 0;
					background: #f44336;
					color: #fff;
					height: 16px;
					line-height: 16px;
					font-weight: 400;
					border-radius: 8px;
					font-size: 12px;
					padding: 0 5px;
				}
			}
		}

		.tableList {
			margin-top: 20px;
			position: relative;

			.over_t {
				overflow-y: auto;
				height: calc(100vh - 285px);
			}

			.right_ii {
				margin-left: 10px;
				color: #2196f3;
				font-size: 16px;
				cursor: pointer;
			}

			table {
				width: 100%;
				border-collapse: collapse;
				border: 1px solid #e6e6e6;
				text-align: center;

				th {
					background: #ddd;
					color: #918d8d;
					font-weight: normal;
				}

				td {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1px solid #EBEEF5;

					p {
						padding: 0 5px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						&.grey {
							color: #918d8d;
						}

						&.yellow {
							color: #ff9800;
						}

						&.blue {
							color: #2196f3;
						}
					}
				}

				tr {
					border: 1px solid #EBEEF5;
					height: 32px;
					line-height: 32px;
				}
			}
		}
	}
</style>
